<template>
  <div class="DetailSlot">
    <h2>{{ title }}</h2>

    <div class="main">
      <slot>默认插槽</slot>
    </div>

    <div class="footer">查看<van-icon name="arrow" /></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
</script>

<style scoped lang="less">
.DetailSlot {
  border-top: 3px solid #ddd;
  border-bottom: 3px solid #ddd;
  padding: 10px;

  h2 {
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    color: var(--primary-color);
  }
}
</style>
